<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList">
		  <el-form-item>
		    <el-input  v-model="dataForm.key" placeholder="商品名称" clearable></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button>查询</el-button>
		    <el-button type="primary" @click="add()">新增</el-button>
		    <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
		  </el-form-item>
		</el-form>
		<el-table
		  :data="dataList"
		  border
		  v-loading="dataListLoading"
		  @selection-change="selectionChangeHandle"
		  style="width: 100%;">
		  <el-table-column
		    type="selection"
		    header-align="center"
		    align="center"
		    width="50">
		  </el-table-column>
		  <el-table-column
		    prop="id"
		    header-align="center"
		    align="center"
		    label="主键">
		  </el-table-column>
		  <el-table-column
		    prop="name"
		    header-align="center"
		    align="center"
		    label="商品名称">
		  </el-table-column>
		  <el-table-column
		    prop="photo"
		    header-align="center"
		    align="center"
		    label="商品图片">
			<template slot-scope="scope">
			  <img width="100%" :src="scope.row.photo"/>
			</template>
		  </el-table-column>
		  <el-table-column
		    prop="types"
		    header-align="center"
		    align="center"
		    label="商品类型">
		  </el-table-column>
		  <el-table-column
		    prop="kucun"
		    header-align="center"
		    align="center"
		    label="商品库存">
		  </el-table-column>
		  <el-table-column
		    prop="price"
		    header-align="center"
		    align="center"
		    label="商品价格">
		  </el-table-column>
		  <el-table-column
		    prop="content"
		    header-align="center"
		    align="center"
		    label="商品介绍">
		  </el-table-column>
		  <el-table-column
		    fixed="right"
		    header-align="center"
		    align="center"
		    width="150"
		    label="操作">
		    <template slot-scope="scope">
		      <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
		      <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<el-pagination
		  @size-change="sizeChangeHandle"
		  @current-change="currentChangeHandle"
		  :current-page="pageIndex"
		  :page-sizes="[10, 20, 50, 100]"
		  :page-size="pageSize"
		  :total="totalPage"
		  layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<!-- 新增 -->
		<el-dialog
		  :title="title"
		  :visible.sync="addOrUpdateVisible"
		  width="50%">
		  <el-form :model="addForm" ref="addForm" :rules="dataRule" label-width="80px">
			  <el-form-item label="商品名称" prop="name">
			    <el-input v-model="addForm.name" placeholder="商品名称"></el-input>
			  </el-form-item>
			  <el-form-item label="商品照片" prop="photo">
			    <el-upload
			      class="avatar-uploader"
				  action='/api/upload'
			      :show-file-list="false"
			      :on-success="handleAvatarSuccess"
			      :before-upload="beforeAvatarUpload">
			      <img v-if="addForm.photo" :src="addForm.photo" class="avatar">
			      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			    </el-upload>
			  </el-form-item>
			  <el-form-item label="商品类型" prop="types">
			    <el-input v-model="addForm.types" placeholder="商品类型"></el-input>
			  </el-form-item>
			  <el-form-item label="商品库存" prop="kucun">
			    <el-input v-model.number="addForm.kucun" placeholder="商品原价"></el-input>
			  </el-form-item>
			  <el-form-item label="商品价格" prop="price">
			    <el-input v-model.number="addForm.price" placeholder="商品价格"></el-input>
			  </el-form-item>
			  <el-form-item label="商品介绍" prop="content">
			    <el-input type="textarea" v-model="addForm.content" placeholder="商品介绍"></el-input>
			  </el-form-item>
			  <el-form-item label="是否上架" prop="shangjia">
			    <el-radio-group v-model="addForm.shangjia">
			      <el-radio-button label="0">上架</el-radio-button>
			      <el-radio-button label="1">下架</el-radio-button>
			    </el-radio-group>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addOrUpdateVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
		  </span>
		  
		</el-dialog>
	</div>	
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				dataForm:{
					key:''
				},
				addForm:{
					id:0,
					name:'',
					types:'',
					photo:'',
					kucun:0,
					price:0,
					content:'',
					shangjia:0
				},
				dataListSelections: [],
				title:'',
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataList: [],
				dataListLoading: false,
				addOrUpdateVisible:false,
				dataRule:{
					name: [
					  { required: true, message: '商品名称不能为空', trigger: 'blur' }
					],
					types: [
					  { required: true, message: '商品类型不能为空', trigger: 'blur' }
					],
					kucun: [
					  { required: true, message: '商品库存不能为空', trigger: 'blur' },
					  { type: 'number', message: '商品库存必须为数字值'}
					],
					price: [
					  { required: true, message: '商品价格不能为空', trigger: 'blur' },
					  { type: 'number', message: '商品价格必须为数字值'}
					],
					content: [
					  { required: true, message: '商品介绍不能为空', trigger: 'blur' }
					]
				}
			}
		},	
		created () {
		  this.getDataList()
		},
		methods:{
			getDataList(){
				axios({
					url:'/api/product/page',
					methods:'get',
					params:{
						'currPage':this.pageIndex,
						'pageSize':this.pageSize,
						'key':this.dataForm.key
					}
				}).then(res=>{
					console.log(res.data)
					if(res.data.code === 0){
						this.dataList = res.data.page.list
						this.totalPage = res.data.page.totalPage
					}else {
						this.dataList = []
						this.totalPage = 0
					}
					this.dataListLoading = false
				}).catch(e=>{
					console.log(e)
				})
			},
			handleAvatarSuccess(res, file) {
			  this.addForm.photo = res.data.url
			},
			//上传图片之前校验
			beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
			
			  if (!isJPG) {
			    this.$message.error('上传头像图片只能是 JPG 格式!');
			  }
			  if (!isLt2M) {
			    this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},
			// 每页数
			sizeChangeHandle (val) {
			  this.pageSize = val
			  this.pageIndex = 1
			},
			// 当前页
			currentChangeHandle (val) {
			  this.pageIndex = val
			},
			//多选
			selectionChangeHandle(val){
				this.dataListSelections = val
			},
			//新增
			add(){
				this.title = '新增商品'
				this.addOrUpdateVisible = true
			},
			//修改
			update(id){
				this.title = '修改商品'
				this.addOrUpdateVisible = true
				this.addForm.id = id
				//查询信息
				axios({
					url:'/api/product/info/'+id,
					method:'get'
				}).then(res=>{
					console.log(res.data.product)
					if(res.data.code === 0){
						const product = res.data.product
						this.addForm.name = product.name
						this.addForm.photo = product.photo
						this.addForm.types = product.types
						this.addForm.kucun = product.kucun
						this.addForm.price = product.price
						this.addForm.content = product.content
						this.addForm.shangjia = product.shangjia
					}
				})
			},
			//新增提交信息
			dataFormSubmit(){
				if(this.title === '新增商品'){
					axios({
						url:'/api/product/addProduct',
						method:'post',
						data:{
							'name':this.addForm.name,
							'types':this.addForm.types,
							'photo':this.addForm.photo,
							'kucun':this.addForm.kucun,
							'price':this.addForm.price,
							'content':this.addForm.content,
							'shangjia':this.addForm.shangjia
						}
					}).then(res=>{
						console.log(res)
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.addOrUpdateVisible = false
							    this.getDataList()
							  }
							})
						}
					}).catch(e=>{
						console.log(e)
					})
				}else if(this.title === '修改商品'){
					axios({
						url:'/api/product/updateProduct',
						method:'post',
						data:{
							'id':this.addForm.id,
							'name':this.addForm.name,
							'photo':this.addForm.photo,
							'types':this.addForm.types,
							'kucun':this.addForm.kucun,
							'price':this.addForm.price,
							'content':this.addForm.content,
							'shangjia':this.addForm.shangjia
						}
					}).then(res=>{
						console.log(res)
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.addOrUpdateVisible = false
							    this.getDataList()
							  }
							})
						}
					}).catch(e=>{
						console.log(e)
					})
				}
			},
			//删除
			deleteHandle(id){
				var ids = id ? [id] : this.dataListSelections.map(item => {
				  return item.id
				})
				this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(()=>{
					axios({
						url:'/api/product/delete',
						method:'post',
						data:ids
					}).then(res=>{
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.getDataList()
							  }
							})
						}else{
							this.$message.error(data.msg)
						}
					})
				})
			}
		}
	}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
</style>